<template>
  <el-card class="box-card">
    <!-- 卡片头部的父元素可以用flex布局, 水平两端对齐, 垂直居中对其-->
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <!-- 左边放标题 -->
      <span>汽车列表</span>
      <!-- 左边放按钮 -->
      <el-button type="primary">添加汽车</el-button>
    </div>
    <!-- 头部下面放卡片主体 -->
    <div>
      <!-- 搜索的表单 :inline="true"表示表单水平排列 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="carName" placeholder="输入汽车名称"/>
        </el-form-item>
        <!-- 搜索按钮也是调用getCarList方法 -->
        <el-button type="primary" @click="getCarList">搜索</el-button>
      </el-form>
      <el-table :data="tableData" stripe border max-height="600" style="width: 100%">
        <el-table-column prop="id" label="汽车编号" min-width="150"></el-table-column>
        <el-table-column prop="carName" label="汽车名称" min-width="150"></el-table-column>
        <el-table-column prop="brand" label="汽车品牌" min-width="150"></el-table-column>
        <el-table-column prop="oilWear" label="百公里油耗" min-width="150"></el-table-column>
        <el-table-column label="操作" min-width="300px">
          <!-- 用template来自定义这一列的内容 v-slot="scope"可以用scope.row拿到这一行数据对象, scope.$index拿到这一行的索引 -->
          <template v-slot="scope">
            <el-button size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
            <el-button type="primary" v-if="scope.row.state==0" size="mini">出租</el-button>
            <el-button type="success" v-if="scope.row.state==1" size="mini">归还</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import http from '../api/http.js'
export default {
  name: "CarView",
  data() {
    return{
      // 用于绑定搜索框的变量
      carName: null,
      // 与表格组件绑定的数组默认为null,请求后端获取
      tableData: null
    }
  },
  methods:{
    getCarList() {
      // 因为http对象因为封装了后端的基础地址,这里的请求地址直接"/控制器类/方法"
      // get()方法是发送http请求,参数1是请求地址,是一个字符串
      // 把需要传给后端的数据放在params里面
      http.get('/car/list', {
        params: {
          // carName是数据名, this.carName是于输入框绑定的全局变量名
          carName:this.carName
        }
      }).then((response) => {
        // 用后端返回的List赋给tableData
        // 根据MVVM的原理:数组与表格绑定,数据改变,视图自动刷新
        this.tableData = response.data
      })
    }
  },
  created() {
    this.getCarList()
  }
}
</script>

<style scoped>

</style>
